<template>
	<view>
		<carHeader :title="'经营统计'">
		</carHeader>
		<view class="one">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
					:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view>

			</scroll-view>
			<u-icon class="img" size="25" name="order"></u-icon>
			<view class="xuanze">
				<uni-data-select v-model="selectedValue" :localdata="range"
					@change="calculateDateRange"></uni-data-select>
			</view>
			<!-- 内容切换 -->
			<view class="content" v-if="navIndex==0">
				<view class="one-one">
					<view class="one-one-one">
						<image class="img1" src="../../static/车联网服务商家端-02经营统计_slices/收入@2x.png"></image>

					</view>
					<view class="jine1">${{shouru}}</view>
					<view class="text1">收入</view>
					<view class="one-one-two">
						<image class="img2" src="../../static/车联网服务商家端-02经营统计_slices/订单-全部订单@2x.png"></image>

					</view>
					<view class="jine2">{{dingdan}}</view>
					<view class="text2">订单</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==1">
				<view class="one-one">
					<view class="one-one-one">
						<image class="img1" src="../../static/车联网服务商家端-02经营统计_slices/收入@2x.png"></image>

					</view>
					<view class="jine1">${{shouru}}</view>
					<view class="text1">收入</view>
					<view class="one-one-two">
						<image class="img2" src="../../static/车联网服务商家端-02经营统计_slices/订单-全部订单@2x.png"></image>

					</view>
					<view class="jine2">{{dingdan}}</view>
					<view class="text2">订单</view>
				</view>
			</view>


		</view>
		<view class="two">
			<view class="title1">收入分布</view>
			<view v-if="listData && listData.length > 0" class="charts-box">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
			<view v-else style="text-align: center;
				line-height: 400rpx; 
				font-size: 100rpx;
				color: gainsboro;
				text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); ">
				<text>嘿嘿没有数据</text>
			</view>
		</view>
		<view class="three">
			<view class="title2">订单分布</view>
			<view>
				<view v-if="listData1 && listData1.length > 0" class="charts-box">
					<qiun-data-charts type="mount" :opts="opts1" :chartData="chartData1" />
				</view>
				<view v-else 
				style="text-align: center;
				line-height: 600rpx; 
				font-size: 100rpx;
				color: gainsboro;
				text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); ">
					<text>嘿嘿没有数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				listData: [],
				listData1: [],
				navIndex: 0,
				tabBars: [{
					name: '今日',
					id: 'guanzhu'
				}, {
					name: '昨日',
					id: 'tuijian'
				}],
				shouru: 0,
				dingdan: 0,
				// 双向绑定的值，应该是选中项的 value  
				selectedValue: null,
				startDateStr: '', // 格式化后的起始时间  
				endDateStr: '', // 格式化后的结束时间
				range: [{
						value: 0,
						text: "三天内"
					},
					{
						value: 1,
						text: "一周内"
					},
					{
						value: 2,
						text: "一月内"
					},
				],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						},
					}
				},

				chartData1: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['mount'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.8
						}
					}
				}

			}
		},
		onLoad() {
			this.checkIndex(0)
			this.getServerData()
			this.getServerData1()
		},
		methods: {
			// 当选择变化时调用  
			calculateDateRange() {
				const now = new Date();
				let startDate, endDate;
				switch (this.selectedValue) {
					case 0: // 三天内  
						startDate = new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000);
						endDate = new Date(now.getTime());
						break;
					case 1: // 一周内  
						startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
						endDate = new Date(now.getTime());
						break;
					case 2: // 一月内  
						// 注意：这里简单地按30天计算，实际情况可能需要考虑月份的天数  
						startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 30);
						endDate = new Date(now.getTime());
						break;
					default:
						startDate = endDate = null;
				}

				// 格式化日期和时间  
				if (startDate && endDate) {
					this.startDateStr = this.formatDateTime(startDate);
					this.endDateStr = this.formatDateTime(endDate);
				} else {
					this.startDateStr = this.endDateStr = '';
				}
				console.log(this.startDateStr)
				console.log(this.endDateStr)
				this.getdata()
				this.getServerData()
				this.getServerData1()
			},
			formatDateTime(date) {
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				const hours = ('0' + date.getHours()).slice(-2);
				const minutes = ('0' + date.getMinutes()).slice(-2);
				const seconds = ('0' + date.getSeconds()).slice(-2);
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			comboxInput(e) {
				console.log("当前输入的值：", e);
			},
			// 输出今日还是昨日时间
			checkIndex(index) {
				this.startDateStr = null;
				this.endDateStr = null;
				console.log(index);
				this.navIndex = index;
				const now = new Date();
				let startDate, endDate;

				// 初始化日期  
				startDate = new Date(now);
				endDate = new Date(now);

				// 设置时间为00:00:00  
				startDate.setHours(0, 0, 0, 0);
				endDate.setHours(0, 0, 0, 0);
				if (index == 1) {
					// 昨天的日期  
					startDate.setDate(startDate.getDate() - 1);
					endDate.setDate(endDate.getDate());
					this.startDateStr = this.formatDateTime(startDate);
					this.endDateStr = this.formatDateTime(endDate);
				}
				this.getdata()
				this.getServerData()
				this.getServerData1()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			getdata() {
				uni.request({
					url: "http://localhost:8080/shop/shouru",
					data: {
						startDate: this.startDateStr,
						endDate: this.endDateStr,
						id: this.$global.shopId
					},
					method: "post",
					success: (res) => {
						console.log(res.data)
						this.shouru = res.data.sum
						this.dingdan = res.data.order
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error('请求失败：', err);
					},
				});

			},

			getServerData() {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				uni.request({
					url: "http://localhost:8080/shop/selectshourufenbu",
					data: {
						startDate: this.startDateStr,
						endDate: this.endDateStr,
						id: this.$global.shopId
					},
					method: "post",
					success: (res) => {

						if (res.data.length > 0) {
							console.log(res)
							let res1 = {
								series: [{
									data: res.data
								}]
							};
							this.chartData = JSON.parse(JSON.stringify(res1));
							this.listData = res.data;
						} else {
							this.listData = [];
						}


					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error('请求失败：', err);
					},
				});
			},

			getServerData1() {
				//模拟从服务器获取数据时的延时
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				uni.request({
					url: "http://localhost:8080/shop/selectddfls",
					data: {
						startDate: this.startDateStr,
						endDate: this.endDateStr,
						id: this.$global.shopId
					},
					method: "post",
					success: (res) => {
						if (res.data.length> 0) {
							console.log(res)
							let res1 = {
								series: [{
									data: res.data,
								}]
							};
							this.chartData1 = JSON.parse(JSON.stringify(res1));
							this.listData1 = res.data;
						} else {
							this.listData1 = [];
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error('请求失败：', err);
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.three {
		.charts-box {
			width: 100%;
			height: 300px;
		}
	}

	.two {
		.charts-box {
			width: 100%;
			height: 200px;
		}
	}

	.one {
		background-color: white;
		width: 90%;
		height: 400rpx;
		position: absolute;
		top: 50px;
		left: 20px;
		border-radius: 10px;

		.img {
			position: absolute;
			top: 60rpx;
			right: 200rpx;
		}

		.xuanze {
			position: absolute;
			left: 72%;
			top: 13%;
			width: 25%;
		}


		.activite {
			color: white;
			background-color: #2f81fa
		}

		.content {
			/* background: #008000; */
			height: 300px;

			.one-one {
				.jine1 {
					text-align: center;
					width: 20%;
					position: absolute;
					top: 68%;
					left: 18%;
				}

				.text1 {
					position: absolute;
					top: 80%;
					left: 24%;
				}

				.jine2 {
					text-align: center;
					width: 20%;
					position: absolute;
					top: 68%;
					left: 63%;
				}

				.text2 {
					position: absolute;
					top: 80%;
					left: 68%;
				}

				.one-one-one {
					height: 80rpx;
					width: 80rpx;
					background-color: #ffa86c;
					border-radius: 10px;
					position: absolute;
					margin-top: 50rpx;
					margin-left: 150rpx;

					.img1 {
						height: 40rpx;
						width: 40rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
					}
				}

				.one-one-two {
					height: 80rpx;
					width: 80rpx;
					background-color: #52a3ff;
					border-radius: 10px;
					position: absolute;
					margin-top: 50rpx;
					right: 150rpx;

					.img2 {
						height: 40rpx;
						width: 40rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			color: #CCCCCC;
			margin-left: 70px;
			color: #2f81fa;



		}

		.scroll-view-item_H {
			display: inline-block;
			width: 20%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			padding: 10px 0;
			margin-top: 20px;

		}

	}

	.two {
		background-color: white;
		width: 90%;
		height: 500rpx;
		position: absolute;
		top: 260px;
		left: 20px;
		border-radius: 10px;

		.title1 {
			font-size: 35rpx;
			font-weight: 500;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}

	.three {
		background-color: white;
		width: 90%;
		height: 660rpx;
		position: absolute;
		top: 520px;
		left: 20px;
		border-radius: 10px;

		.title2 {
			font-size: 35rpx;
			font-weight: 500;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>